<template>
    <div class="shop-list-container" @click="onTodeatils">
        <div class="shop-list-img">
            <img :src="item.picUrl" alt="">
        </div>
        <div class="shop-list-title">
            <div>{{item.shopName}}</div>
            <div>
                <span>{{item.monthSalesTip}}</span>
                <span>{{item.deliveryTimeTip}}</span>
                <span>{{item.distance}}</span>
                
            </div>
            <div>
                <span>{{item.minPriceTip}}</span>
                <span>{{item.shippingFeeTip}}</span>
                <span>{{item.averagePriceTip}}</span>
            </div>
            <div></div>
            <div></div>
        </div>
    </div>
</template>
<script>

export default {
    props:{
        item:Object
    },
    methods:{
        onTodeatils(){
            var id=this.item.mtWmPoiId;
            this.$store.dispatch("detailsitem",id)
            this.$router.push({
                name:"Details",
                params:{
                    item:this.showlist
                }
            })
        }
    },
    computed:{
        showlist:function(){
            return this.$store.state.showlist
        },
    },

}
</script>
<style scoped>

.shop-list-container{
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 10px;
    /* background: skyblue; */
}
.shop-list-img{
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.shop-list-img img{
    width: 90%;
}
.shop-list-title{
    width: 60%;
}
</style>